<template lang="pug">
transition(name="fade")
  cube-popup(v-show="visible"
          type="top-mask"
          :mask-closable="true"
          @mask-click="maskClick"
          ref="topMask")
</template>

<script>
export default {
// 配置名称属性，供cube-UI的createAPI调用
name: 'mask-top',

data() {
  return {
    visible:false
  }
},

methods: {
  maskClick() {
    this.hide()
  },
  show() {
    this.visible = true
    this.$emit('sendSeeable', true)
  },
  hide() {
    this.visible = false
    this.$emit('sendSeeable', false)
  }
}
}
</script>

<style lang="stylus" scoped>
// 不遮挡购物车
.cube-top-mask
  z-index:100
  bottom:216px
  &.fade-enter-active,&.fade-leave-active
    transition: all .4s linear
  &.fade-enter,&.fade-leave-to
    opacity:0
</style>